<template>
  <view>
    <view style="text-align: center; margin-top: 20rpx">
      <u-button
        size="medium"
        shape="circle"
        type="primary"
        @click="toServerUrlPage"
        :ripple="true"
        ripple-bg-color="#a0cfff"
        >填写服务器地址</u-button
      >
    </view>
    <view class="t-login">
      <view class="t-b">{{ title }}</view>
      <form class="cl">
        <view class="t-a">
          <image class="image-tag" src="@/static/img/email.png"></image>
          <input
            type="text"
            v-model="loginForm.email"
            placeholder="请输入邮箱号"
          />
        </view>
        <view class="t-a">
          <image class="image-tag" src="@/static/img/password.png"></image>
          <input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          />
        </view>
        <button form-type="submit" @tap="login">立即登录</button>
      </form>
      <view class="register-password">
        <view class="register" @click="registerNav">注册</view>
        <view class="forget-password" @click="forgetPwd">忘记密码？</view>
      </view>
      <view class="t-d">
        <u-divider>其他登录方式</u-divider>
      </view>
      <view class="loginType">
        <!-- #ifdef MP -->
        <view class="wechat item">
          <view class="icon">
            <u-icon
              size="50"
              name="weixin-fill"
              color="rgb(83,194,64)"
            ></u-icon>
          </view>
          微信
        </view>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <view class="QQ item">
          <view class="icon">
            <u-icon size="50" name="qq-fill" color="rgb(17,183,233)"></u-icon>
          </view>
          QQ
        </view>
        <!-- #endif -->
      </view>
      <view class="t-f">
        <u-checkbox
          @change="checkboxChange"
          v-model="check"
          size="20rpx"
          label-size="20rpx"
        >
          同意<text>《用户协议》</text>和<text>《隐私政策》</text></u-checkbox
        >
      </view>
    </view>
  </view>
</template>
<script>
import { setToken, setUserInfo } from "@/common/auth.js";
import { networkStatus } from "../../utils/chat_utils";
import { createSocket } from "@/common/xiaofei-im/xiaofei-im-js-sdk";
import Vue from 'vue'
import { getNettyUrl } from '../../utils/constants';
export default {
  data() {
    return {
      title: "欢迎登录账号",
      loginForm: {
        email: "1835698775@qq.com",
        password: "123456",
        flag: false,
      },
      check: true,
    };
  },
  onLoad() {
    networkStatus();
    // #ifndef MP
    this.loginForm.email = "2579879363@qq.com";
    // #endif
  },
  methods: {
    toServerUrlPage() {
      this.$u.route("pages/server_url/server_url");
    },
    checkboxChange(obj) {
      this.check = obj.value;
    },
    login() {
      let that = this;
      if (!this.check) {
        this.$u.toast("请勾选协议！");
        return;
      }
      this.$u.api.login(this.loginForm).then((res) => {
        let user = res.data;
        setToken(user.token);
        Vue.prototype.$fim = createSocket(getNettyUrl(), {
          token: token,
          language: "zh-cn",
          address: "四川省成都市",
          ip: "127.0.0.1",
        })
        user.token = "";
        setUserInfo(user);
        uni.$emit("setVuexUserInfo", {
          user: user,
          isLoginPage: true,
        });

        uni.reLaunch({
          url: "../index/index",
          fail: (err) => {
            this.$u.toast("跳转出错");
          },
        });
      });
    },
    async getInfo() {
      let info = await this.$u.api.getInfo();
      return info;
    },
    registerNav() {
      this.$u.route("pages/register/register");
    },
    forgetPwd() {
      this.$u.route("pages/forget_pwd/forget_pwd");
    },
  },
};
</script>
<style lang="scss">
.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;

  button {
    font-size: 28rpx;
    background: #000;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
  }

  input {
    padding: 0 20rpx 0 120rpx;
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 50rpx;
    background: #f4f4f4;
    font-size: 28rpx;
    border-radius: 50rpx;
  }

  .register-password {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    color: blue;
  }

  .t-a {
    position: relative;

    .image-tag {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      left: 40rpx;
      top: 28rpx;
      border-right: 2rpx solid #dedede;
      padding-right: 20rpx;
    }
  }

  .t-b {
    text-align: center;
    font-size: 46rpx;
    color: #000;
    padding: 100rpx 0;
  }

  .t-c {
    width: 200rpx;
    height: 90rpx;
    position: absolute;
    right: 1rpx;
    top: 1rpx;
  }

  .t-d {
    font-size: 20rpx;
    text-align: center;
    color: #999;
    margin-top: 100rpx;
  }

  .loginType {
    font-size: 20rpx;
    display: flex;
    justify-content: space-evenly;
    width: 250rpx;
    margin: 20rpx auto 100rpx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $u-content-color;
    }
  }

  .t-f {
    text-align: center;
    color: #999;

    text {
      color: #2b85e4;
    }
  }

  .uni-input-placeholder {
    color: #000;
  }
}

.cl:after {
  clear: both;
  display: flex;
  justify-content: space-between;
  visibility: hidden;
  height: 0;
  content: "\20";
}
</style>
